<template>
  <div>
    <button @click="start">开始</button>
    <div class="play">
      <div class="red" :style="'top:'+ top + 'left:' + left" @click="mouseenter"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      top: '',
      left: '',
      second: 30,
      point: 0,
    }
  },
  methods: {
    start() {
      this.second = 30
      this.point = 0
      console.log(30);
      this.down()
    },
    down() {
      setTimeout(() => {
        this.second--
        console.log(this.second);
        if (this.second > 0) {
          this.down()
        } else{
          console.log(this.point + '分');
        }
      }, 1000);
    },
    mouseenter() {
      this.top = (Math.random() * 100) + '%;'
      this.left = (Math.random() * 100) + '%;'
      this.point++
    }
  }
}
</script><style lang="scss">
.play {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: relative;
  .red {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
  }
}
</style>
